<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 步骤2: 引入react 核心库文件. 相当于vue.js  提供了React-->
    <script src="../js/react.js"></script>
    <!-- 引入 react-dom.js 该文件是使用操作dom的核心文件 提供了ReactDOM-->
    <script src="../js/react-dom.js"></script>
    <!-- 引入babel.js 该文件用来将jsx 语法编译成 正确的html, -->
    <script src="../js/babel.js"></script>
</head>

<body>
    <!-- 步骤1: 在网页中添加一个react 根节点, 该节点内最后可以使用react 语法. 外边不行 -->
    <div id="root">
        <!-- 该位置可以使用react 语法 -->
    </div>
</body>

</html>
<script type="text/babel">
    // jsx 语法介绍
    // 01: 使用{变量}来展示数据 , {} 为react中的插值表达式
    //
    // 步骤3:
    let rootDOM = document.querySelector('#root');
    const root = ReactDOM.createRoot(rootDOM);
    // 使用jsx 语法创建界面节点
    const username = '小岳岳';
    const bool = true;
    const age = 19;
    const imgUrl = 'https://img2.baidu.com/it/u=1689327456,1202033617&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=666'
    const styleObj = {
        width: '100px',
        height: '100px',
        background: 'green'
    }
    const link = '<a href="https://www.baidu.com">百度一下</a>';
    const str = '爱你一万年';
    const arr = ['a', 'b', 'c'];
    root.render(
        <div id='100'>
            <p>{username}</p>
            <p>bool:{bool}</p>
            {/*此处为注释代码: 使用三目运算符*/}
            <p>三目:{age > 20 ? '成年' : '未成年'}</p>
            {/*<img src={imgUrl} alt="" />*/}
            <p style={{
                width: '100px',
                height: '100px',
                background: 'green',
                fontSize: '20px'
            }}>动态样式</p>
            <p dangerouslySetInnerHTML={{ __html: link }}></p>
            <p>{str.substr(2)}</p>
            {/*
            <ul>
                <li>{arr}</li>
            </ul>
            */}

            <ul>
                {
                    arr.map((item, index) => {
                        return <li key={index}>{index}--{item}</li>
                    })
                }
            </ul>
        </div>
    )

</script>